<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" href="/${BasePath}/static/mobile/css/base.css" />
    <link rel="stylesheet" href="/${BasePath}/static/mobile/css/style.css" />
    <link rel="stylesheet" href="/${BasePath}/static/mobile/css/swiper.min.css" />
    <link rel="stylesheet" href="/${BasePath}/static/mobile/css/ydui.css" />
    <link rel="stylesheet" href="/${BasePath}/static/mobile/css/validate.css" />
    <title>半岛云</title>  
</head>
<body>
    <input type="hidden" id="active" value="grzx">
	<div class="wrap">
		<!--标题栏-->
		<div class="fixed_top">
			<div class="top-l"><a href="javascript:window.history.back()"><i class="icons">&#xe626;</i></a></div>
			<h2>修改个人信息</h1>
		</div>
		<div class="container">	
			<form class="m-cell" id="infoForm">
			    <input type="hidden" name="id" id="id" value="${info.id!'0'}">
                <input type="hidden" name="headPortrait" id="headPortrait" value="${info.headPortrait!'http://static.ydcss.com/ydui/img/logo.png'}">
                <div class="cell-item">
				    <div class="cell-left width100px">头像：</div>
				    <div class="cell-right cell-arrow" id="upload"><img class="imghead" id="image" alt="点击上传" src="${info.headPortrait!'http://static.ydcss.com/ydui/img/logo.png'}" /></div>
				    <input id="upfile" style="display: none" type="file" name="upfile"> 
				</div>
				<div class="cell-item ">
				    <div class="cell-left width100px">用户名：</div>
				    <div class="cell-right"><input type="text" disabled value="${userName!''}"  class="cell-input" autocomplete="off"  /></div>
				</div>			
				<div class="cell-item">
				    <div class="cell-left width100px">真实姓名：</div>
				    <div class="cell-right"><input type="text" name="name" class="cell-input" value="${info.name!''}" placeholder="请输入您的姓名" autocomplete="off" data-required="true" data-descriptions="username"/></div>
				</div>
				<div class="cell-item">
			        <div class="cell-left width100px">性别：</div>
			        <label class="cell-right cell-arrow">
			            <select class="cell-select" name="sex" id="sex" data-required="true" data-descriptions="sex">
			                <option value="">请选择性别</option>
			                <option value="男">男</option>
			                <option value="女">女</option>
			                <option value="保密">保密</option>
			            </select>
			        </label>
			    </div>
				<div class="cell-item">
				    <div class="cell-left width100px">年龄：</div>
				    <div class="cell-right"><input type="text" name="age" class="cell-input" value="${info.age!''}" placeholder="请输入您的年龄" autocomplete="off" data-pattern="^[0-9]+$"  data-required="true" data-descriptions="age"/></div>
				</div>
				<div class="cell-item">
				    <div class="cell-left width100px">手机号：</div>
				    <div class="cell-right"><input type="text" name="phone" class="cell-input" value="${info.phone!''}" placeholder="请输入您的手机号" autocomplete="off" data-validate="phone" data-describedby="phone-description" /></div>
				</div>			    
				<div class="cell-item">
	                <div class="cell-left width100px">出生年月：</div>
	                <div class="cell-right"><input class="cell-input" type="date" name="birthday" value="${info.birthday!''}"  data-required="true" data-descriptions="birthday"/></div>
                </div>
	            <div class="cell-item">
	                <div class="cell-right"><textarea class="cell-textarea" name="synopsis" placeholder="个人简介" data-required="true" data-descriptions="synopsis">${info.synopsis!''}</textarea></div>
	            </div>
			</form>
			<a class="tj" id="tj">提 交</a>
		
		<#include "/common/foot.html">
	</div>
</body>
<script type="text/javascript" src="/${BasePath}/static/mobile/js/ydui.flexible.js"></script>
<script type="text/javascript" src="/${BasePath}/static/mobile/js/ydui.js"></script>
<script type="text/javascript" src="/${BasePath}/static/mobile/js/jquery-mvalidate.js"></script>
<script type="text/javascript" src="/${BasePath}/static/mobile/js/ajaxfileupload.js" charset="utf-8" ></script>
<script type="text/javascript">
    $(function(){
    	//表单初始化
    	$("#sex").val('${info.sex!''}');
    	
        $.mvalidateExtend({
            phone:{
                required : true,   
                pattern : /^1[34578]\d{9}$/,
                each:function(){  
                },
                descriptions:{
                    required : '<div class="field-invalidmsg">请输入手机号码</div>',
                    pattern : '<div class="field-invalidmsg">您输入的手机号码格式不正确</div>',
                    valid : '<div class="field-validmsg">正确</div>'
                }
            }
        });
       
        $("#infoForm").mvalidate({
            type:1,
            onKeyup:true,
            sendForm:false,
            onKeyup:true,
            firstInvalidFocus:true,
            eachField:function(){

            },
            valid:function(){
                $.ajax({
                    cache: true,
                    type: "POST",
                    url: "/${BasePath}/main/saveUpUserInfo",
                    data: $('#infoForm').serialize(),
                    async: false,
                    error: function(request) {
                    	YDUI.dialog.alert('提交失败，请稍后再试！');
                    },
                    success: function(data) {
                        if(data.code = "1") {
                        	YDUI.dialog.alert(data.msg, function(){
                        		window.location.href="/${BasePath}/main/index";   
                        	}); 
                        } else {
                        	YDUI.dialog.alert(data.msg);
                        }
                    }
                });                
            },
            invalid:function(){
               
            },
            eachValidField:function(){
              
            },
            eachInvalidField:function(){
               
              
            },
            descriptions:{
                username:{
                    required : '<div class="field-invalidmsg">请输入姓名</div>',
                    valid : '<div class="field-validmsg">验证通过</div>'
                },      
                age:{
                    required : '<div class="field-invalidmsg">请输入年龄</div>',
                    pattern : '<div class="field-invalidmsg">你输入的格式不正确</div>',
                    valid : '<div class="field-validmsg">验证通过</div>'
                },
                sex:{
                    required : '<div class="field-invalidmsg">请选择性别</div>',
                    valid : '<div class="field-validmsg">验证通过</div>'
                },
                birthday:{
                    required : '<div class="field-invalidmsg">请选择出生年月</div>',
                    valid : '<div class="field-validmsg">验证通过</div>'
                }, 
                synopsis:{
                    required : '<div class="field-invalidmsg">请输入个人简介</div>',
                    valid : '<div class="field-validmsg">验证通过</div>'
                }
            }
        });
        
        $("#tj").click(function(){
        	 $('#infoForm').submit();
        	});
 
	})
	
	
	
	
	
	
    /* 上传图片 */
    $("#upload").on('click', function() {
      var dev = YDUI.device 
      if(dev.isIOS){
    	  $("#upfile").trigger("click");
    	  $("#upfile").trigger("click");
      }else{
    	  $("#upfile").trigger("click");
      }
    });
    $("#upfile").on("change", upfile);

    function upfile() {
        var fileSize = $("#upfile")[0].files[0].size;//文件的大小，单位为字节B
        if(fileSize > 1048576) {
        	YDUI.dialog.alert('请上传大小小于1M的图片'); 
        }else{
            $.ajaxFileUpload({
                secureuri: false,
                url: "/${BasePath}/upload/springUpload",
                dataType: "json",
                //fileElementId是img标签的id  
                fileElementId: 'upfile',
                success: function(data) {
                    //上传成功后改变<img>标签的src地址，id参数其实不需要，主要是为了刷新img的图片资源。  
                    $("#image").attr("src", data.path);
                    $("#headPortrait").val(data.path);
                    //重新绑定事件，防止二次上传时失效  
                    $("#upfile").on("change", upfile);
                }
            });        	
        }
    }
</script>
</html>